<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>
</head>

<body>
    <input type="text">
    <p></p>
</body>
<script>
    const obj = {
        'msg': 'hello world'
    }
    const p = document.getElementsByTagName('p')[0]
    const input1 = document.getElementsByTagName('input')[0]
    input1.addEventListener('input', input)
    p.innerText = obj.msg
    Object.defineProperty(obj, 'msg', {
        get() {
            return msg
        },
        set(val) {
            msg = val
            p.innerText = obj.msg
        }
    })
    function input(e) {
        console.log(e.srcElement.value);
        obj['msg'] = e.srcElement.value
    }
    setTimeout(() => {
        obj['msg'] = '我很爱这个世界啊'

    }, 1000)
    setTimeout(() => {
        obj['msg'] = '这个世界是我们的'
    }, 2000)
    setTimeout(() => {
        obj['msg'] = '我一定会有好运的'
    }, 3000)


</script>

</html>